import { createRouter, createWebHistory } from 'vue-router'
import { seoConfig } from '../config/seo'

// 使用动态导入实现懒加载
const Home = () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
const About = () => import(/* webpackChunkName: "about" */ '../views/About.vue')
const Services = () => import(/* webpackChunkName: "services" */ '../views/Services.vue')
const Projects = () => import(/* webpackChunkName: "projects" */ '../views/Projects.vue')
const Team = () => import(/* webpackChunkName: "team" */ '../views/Team.vue')
const Contact = () => import(/* webpackChunkName: "contact" */ '../views/Contact.vue')
const NotFound = () => import(/* webpackChunkName: "not-found" */ '../views/NotFound.vue')

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: '首页',
      icon: 'home',
      description: '欢迎访问我们的网站'
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      title: '关于我们',
      icon: 'info',
      description: '了解我们的故事和文化'
    }
  },
  {
    path: '/services',
    name: 'Services',
    component: Services,
    meta: {
      title: '服务内容',
      icon: 'services',
      description: '探索我们提供的专业服务'
    }
  },
  {
    path: '/projects',
    name: 'Projects',
    component: Projects,
    meta: {
      title: '项目案例',
      icon: 'projects',
      description: '查看我们的成功案例'
    }
  },
  {
    path: '/team',
    name: 'Team',
    component: Team,
    meta: {
      title: '团队介绍',
      icon: 'team',
      description: '认识我们的专业团队'
    }
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact,
    meta: {
      title: '联系我们',
      icon: 'contact',
      description: '联系我们获取支持'
    }
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: NotFound,
    meta: {
      title: '页面未找到'
    }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
  // 添加性能优化配置
  performance: true
})

// SEO 路由守卫
router.beforeEach((to, from, next) => {
  // 获取当前页面的 SEO 配置
  const pageName = to.name?.toLowerCase()
  const pageConfig = seoConfig.pages[pageName] || {}
  
  // 更新页面标题和 meta 信息
  document.title = pageConfig.title || `${to.meta.title} - ${seoConfig.siteName}` || seoConfig.defaultTitle
  
  // 更新 meta 标签
  updateMetaTag('description', pageConfig.description || seoConfig.defaultDescription)
  updateMetaTag('keywords', pageConfig.keywords || seoConfig.defaultKeywords)
  
  // 更新 Open Graph 标签
  updateMetaTag('og:title', pageConfig.title || document.title)
  updateMetaTag('og:description', pageConfig.description || seoConfig.defaultDescription)
  updateMetaTag('og:image', pageConfig.image || seoConfig.defaultImage)
  updateMetaTag('og:url', `${seoConfig.siteUrl}${to.path}`)
  
  // 生成面包屑结构化数据
  const breadcrumbItems = to.matched.map(record => ({
    name: record.meta.title || record.name,
    path: record.path
  }))
  
  if (breadcrumbItems.length > 0) {
    const script = document.querySelector('#breadcrumb-structured-data')
    if (script) script.remove()
    
    const newScript = document.createElement('script')
    newScript.id = 'breadcrumb-structured-data'
    newScript.type = 'application/ld+json'
    newScript.textContent = JSON.stringify(seoConfig.structuredData.breadcrumb(breadcrumbItems))
    document.head.appendChild(newScript)
  }
  
  next()
})

function updateMetaTag(name, content) {
  if (!content) return
  
  let meta = document.querySelector(`meta[${name.startsWith('og:') ? 'property' : 'name'}="${name}"]`)
  if (!meta) {
    meta = document.createElement('meta')
    meta.setAttribute(name.startsWith('og:') ? 'property' : 'name', name)
    document.head.appendChild(meta)
  }
  meta.setAttribute('content', content)
}

// 全局导航守卫
router.beforeEach((to, from, next) => {
  // 更新页面标题
  document.title = to.meta.title ? `${to.meta.title} - 公司网站` : '公司网站'
  next()
})

export default router
